<!-- 头部导航 navBar -->
<template>
    <nut-navbar :title="title" :fixed="true" :placeholder="true" :safe-area-inset-top="true">
        <template #left>
            <!--   -->
            <view class="nav_bar_wrap" v-if="showleftGap">
                <view class="nav_bar_icon nav_bar_btn_goback" @click="goBack"></view> | <view
                    class="nav_bar_icon nav_bar_btn_gohome" @click="goHome"></view>
            </view>
        </template>
    </nut-navbar>
</template>
<script setup>

defineOptions({
    name: 'navBar'
})
// 是否显示左侧自定义胶囊：tabbar页面不展示
const showleftGap = computed(() => {
    let pages = getCurrentPages() // 页面指针数组
    if ( pages.length > 1 && (showBackIcon || showHomeIcon)) {
        return true
    } else {
        return false
    }
})
const props = defineProps({
    title: {
        type: String, // 标题
        default: ''
    },
    showBackIcon: {
        type: Boolean, // 是否展示返回icon
        default: true
    },
    showHomeIcon: {
        type: Boolean, // 是否展示首页icon
        default: true
    }
})
// 返回上一页面
const goBack = (delta = 1) => {
    uni.navigateBack({
        delta
    })
}
// 返回主页面
const goHome = () => {
    uni.reLaunch({
        url: 'pages/index/index'
    })
}
</script>
<style lang="scss" scoped>
.nav_bar_wrap {
    border: 1px solid rgba(223, 223, 223, 1);
    border-radius: 16px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;

    .nav_bar_icon {
        display: inline-block;
        background-size: 22px 22px;
        width: 22px;
        height: 22px;
        margin: 0 10rpx;
    }

    .nav_bar_btn_goback {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E  %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E");
    }

    .nav_bar_btn_gohome {
        background-image: url("data:image/svg+xml,%3Csvg t='1565752242401' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4326' width='48' height='48'%3E%3Cpath d='M931.148 451.25L591.505 97.654c-21.106-21.953-49.313-34.034-79.551-34.034-30.235 0-58.448 12.081-79.554 34.034L92.76 451.25c-35.049 36.498-30.536 68.044-24.742 81.222 4.13 9.35 18.07 35.05 58.231 35.05h49.78v272.016c0 61.756 44.342 119.906 107.357 119.906h144.587v-287.87c0-30.866-4.675-48.062 26.848-48.062h114.268c31.52 0 26.845 17.196 26.845 48.061v287.872h144.588c63.013 0 107.358-58.15 107.358-119.906V567.523h49.782c40.16 0 54.1-25.7 58.229-35.05 5.793-13.18 10.306-44.726-24.743-81.224z m-33.486 60.28h-105.77v328.007c0 30.865-19.877 63.917-51.37 63.917h-88.6V671.572c0-61.761-19.79-104.05-82.832-104.05H454.821c-63.045 0-82.836 42.289-82.836 104.05v231.883h-88.599c-31.495 0-51.37-33.052-51.37-63.917V511.529H126.25c-0.984 0-1.888-3.852-2.708-3.907 1.94-3.388 5.276-11.975 10.825-17.743l339.671-353.35c10.142-10.578 24.467-17.057 38.353-16.924 13.888-0.133 27.342 6.346 37.483 16.923L889.54 489.88c5.549 5.768 8.885 14.355 10.825 17.743-0.818 0.055-1.72 3.907-2.704 3.907z' fill='%23000000' p-id='4327'%3E%3C/path%3E%3C/svg%3E");
    }
}</style>
